<template>
  <div id="app">
    <div id="nav" v-if="$route.meta.flag">
      <router-link to="/ind" >
        <i :class="[isActive ? 'i11' : 'i1']"></i>
        <span :class="{ yan: isActive }">首页</span>
      </router-link>
      <router-link to="/about">
        <i :class="[isActive1 ? 'i22' : 'i2']"></i>
        <span :class="{ yan: isActive1 }">精选</span>
      </router-link>
      <router-link to="/gou">
        <i :class="[isActive2 ? 'i33' : 'i3']"></i>
        <span :class="{ yan: isActive2 }">购物车</span>
      </router-link>
      <router-link to="/wo">
        <i :class="[isActive3 ? 'i44' : 'i4']"></i>
        <span :class="{ yan: isActive3 }">我的</span>
      </router-link>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      isActive1: false,
      isActive2: false,
      isActive3: false,
    };
  },
  mounted() {
    if(localStorage.getItem('shop') == null){
      this.$store.state.SHOP =  [];
    }else{
      this.$store.state.SHOP = JSON.parse(localStorage.getItem('shop'));
    }
    // this.$store.state.SHOP=JSON.parse(localStorage.getItem('shop'))
  },
  updated(){
    if(localStorage.getItem('shop') == null){
      this.$store.state.SHOP =  [];
    }else{
      this.$store.state.SHOP = JSON.parse(localStorage.getItem('shop'));
    }
    // console.log(typeof shop);
  },
  methods: {},
  computed: {},
  watch: {
    $route: function (to, from) {
      (String(to.path) == "/ind" || String(to.path) == "/")
        ? (this.isActive = true)
        : (this.isActive = false);
      String(to.path) == "/about"
        ? (this.isActive1 = true)
        : (this.isActive1 = false);
      String(to.path) == "/gou"
        ? (this.isActive2 = true)
        : (this.isActive2 = false);
      String(to.path) == "/wo"
        ? (this.isActive3 = true)
        : (this.isActive3 = false);
    },
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
p {
  margin-bottom: 0 !important;
}
a {
  text-decoration: none;
}

#nav {
  width: 100%;
  height: 1.3rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  z-index: 1000;
  a {
    flex: 1;
    // height: 100%;
    text-align: center;
    color: #b0b0b0;
    font-size: 0.35rem;
    //控制图片和文字
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    i {
      display: inline-block;
      width: 0.7rem;
      height: 0.7rem;
      margin: auto;
    }
    .yan {
      color: #b08d51;
    }
    .i1 {
      background: url("../public/img/ashou1.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
    .i11 {
      background: url("../public/img/ashou2.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
    .i2 {
      background: url("../public/img/ajing1.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
    .i22 {
      background: url("../public/img/ajing2.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
    .i3 {
      background: url("../public/img/agou1.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
    .i33 {
      background: url("../public/img/agou2.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
    .i4 {
      background: url("../public/img/awo1.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
    .i44 {
      background: url("../public/img/awo2.jpg") 0 0 no-repeat;
      background-size: 100%;
    }
  }
}
</style>

